<template>
  <div class="homeCard">
    <section>
      <slot></slot>
      <div class="content">
        <div class="title">{{ options.title }}</div>
        <div class="price">
          <p><span>￥</span>{{ options.format_price }}</p>
          <div class="tip" v-if="!options.is_allowed_refund">不支持退款</div>
        </div>
        <div class="images">
          <div class="acenter">
            <nut-image
              class="imagesItem"
              v-for="imgS in options.image_list"
              :src="commonStore.img_domain + imgS"
              showError
            >
              <template #error>
                <nut-image
                  src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png"
                  fit="contain"
                />
              </template>
            </nut-image>
          </div>
        </div>
        <div class="bottom acenter">
          <div class="users">
            <template
              v-for="(img, element) in options.recent_users"
              :key="element"
            >
              <nut-image
                :src="
                  img.avatar
                    ? img.avatar
                    : 'https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png'
                "
                v-if="element <= 4"
                round
              >
                <template #error>
                  <nut-image
                    src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png"
                  ></nut-image>
                </template> </nut-image
            ></template>
          </div>
          <p class="count">{{ options.join_count }}人跟团中</p>
          <span class="line"> | </span>
          <p class="status" :class="{ iSgreen: options.status == 1 }">
            {{ changeGroupBuyStatus(options.status) }}
          </p>
          <share-btn @myShare="shareWtg(options)" v-preventReClick></share-btn>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts" name="homeCard">
import { getAssetsFile, changeGroupBuyStatus } from "@/utils/pub-use";
import shareBtn from "./utils/shareBtn.vue";
import { reactive, ref } from "vue";
import useCommonStore from "@/store/common";
import useInstance from "@/hooks/useInstance";
const { global } = useInstance();
const commonStore = useCommonStore();
const props = defineProps<{ options: any }>();

let showRound = ref<boolean>(false);

const shareWtg = (item: any) => {
  let body = {
    name: "微团购",
    icon: "http://emoji.mpshenghuo.com/icon_micro_group.jpg",
    title: item.title,
    userName: item.nickname,
    userAvatar: item.avatar,
    imgUrl: item.goods_list[0].image_list?.length
      ? commonStore.img_domain + item.goods_list[0].image_list[0]
      : "https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png",
    price: item.share_price,
    // link: `http://192.168.10.23:9527/#/loading?type=2&&id=${item.serial_num}&&userId=${item.id}`,
    link: `${import.meta.env.VITE_BASE_URL}#/loading?type=2&&id=${
      item.serial_num
    }&&userId=${item.id}`,
    type: "2",
  };
  console.log(body);
  if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    window.webkit.messageHandlers.setShareData.postMessage(
      JSON.stringify(body)
    ); //调用ios方法
  } else if (/(Android)/i.test(navigator.userAgent)) {
    window.myjs.setShareData("微团购", JSON.stringify(body)); //myjs 是android端和js协商定义的调用对象, addFriend 是方法名,
  }
};
</script>

<style lang="scss" scoped>
.homeCard {
  background: #ffffff;
  border-radius: 20px;

  .content {
    background: #ffffff;
    border-radius: 20px;
    margin-top: -18px;
    padding: 18px 30px 25px 30px;
    .title {
      font-size: 30px;
      color: #000000;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis; // text-overflow css3的属性，当文本溢出时，显示省略号
      display: -webkit-box;
      -webkit-line-clamp: 2; // 设置两行文字溢出
      -webkit-box-orient: vertical;
    }
    .price {
      margin-top: 16px;
      display: flex;

      p {
        font-size: 30px;
        color: #f55726;
        margin-right: 10px;
      }
      span {
        font-size: 26px;
        margin-right: 3px;
      }
      .tip {
        width: fit-content;
        border-radius: 6px;
        border: 1px solid #f55726;
        color: #f55726;
        font-size: 20px;
        font-weight: 500;
        padding: 5px;
      }
    }
    .images {
      margin-top: 20px;
      .imagesItem {
        margin: 0px;
      }
      .nut-image {
        width: 210px;
        height: 210px;
        :deep(img) {
          border-radius: 20px;
        }
      }
      .imagesItem:nth-child(2) {
        margin: 0 10px;
      }
    }
    .bottom {
      margin-top: 23px;
      .users {
        display: flex;
        .nut-image {
          margin-left: -12px;
          border: 3px solid #ffffff;
          :deep(img) {
            width: 40px;
            height: 40px;
          }
        }
        .nut-image:nth-child(1) {
          margin-left: 0px;
        }
      }
      .count {
        margin-left: 12px;
        font-size: 26px;
        color: #40ae36;
      }
      .line {
        font-size: 26px;
        color: #a7b3a5;
        margin: 0 5px;
      }
      .status {
        font-size: 26px;
        color: #a7b3a5;
        margin-right: auto;
      }
      .iSgreen {
        color: #40ae36;
      }
    }
  }

  :deep(.popup-bottom) {
    padding: 34px 60px 80px 60px;
    height: 420px;
    width: -webkit-fill-available;
    background: #f8f9fa;
  }
  .shareTop {
    position: relative;
    width: 100%;
    p {
      color: #333333;
      font-size: 32px;
      font-weight: 500;
    }
    .nut-image {
      position: absolute;
      right: 0;
      :deep(img) {
        width: 29px;
        height: 29px;
      }
    }
  }
  .shareCenter {
    margin-top: 60px;
    .shareImg {
      :deep(img) {
        width: 100px;
        height: 100px;
      }
    }
    p {
      margin-top: 20px;
      font-size: 26px;
      font-weight: 400;
      color: #999999;
    }
  }
  .shareBottom {
    width: 630px;
    height: 90px;
    background: #ffffff;
    border-radius: 45px;
    font-size: 30px;
    font-weight: 500;
    color: #333333;
    margin-top: 60px;
  }
}
</style>
